<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>xmlHttpRequest对象实现异步获取歌曲</title>
  <style>
    #mydiv {
      height: 80px;
      width: 500px;
      background-color: #e8f7f2;

      text-align: center;
    }

    #div1 {
      background-color: #22be81;
      text-align: center;
      line-height: 50px;
    }

    .city {
      margin-top: 15px;
      border: 0.5px solid gainsboro;
      border-radius: 5px;
      height: 30px;
      width: 250px;
      text-align: center;
    }

    .search {
      margin-top: 20px;
      border: 0.5px solid gainsboro;
      border-radius: 5px;
      height: 28px;
      width: 250px;
      text-align: center;
      background-color: #ff767a;
      color: white;
    }

    .div2 {
      height: 55px;
      width: 275px;
      background-color: white;
      margin: 10px;
      text-align: left;
      font-size: 10px;
      padding: 7px 0px 0px 5px;
    }
  </style>

</head>
<body>
<div id="mydiv">
  <input type="submit" value="新歌榜" class="search" id="search"/>
</div>
<div class="div2">
  <div>歌手：<span id="auther"></span></div>
  <div>歌名：<span id="name"></span></div>
  <div>封面：<img id="picUrl" width="400" height="500"></div>
  <div>歌曲：<audio id="url" autoplay="true" controls ></audio></div>
</div>

<script>
    window.onload = function () {
        var btn = document.getElementById("search");
        
        btn.onclick = function () {
          //创建对象
          let xhr = new XMLHttpRequest();
          //回调函数获取请求相应信息
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
               console.log(xhr.responseText);
               res = JSON.parse(xhr.responseText);
               document.getElementById("auther").innerText = res.info.auther;
              document.getElementById("name").innerText = res.info.name;
              document.getElementById("picUrl").src = res.info.picUrl;
              document.getElementById("url").src = res.info.url;
            }
          }
          //连接发送
          xhr.open('GET', 'https://api.vvhan.com/api/wyMusic/新歌榜?type=json', true);
          xhr.send();

          
        }
    }
  
  
  
</script>

</body>
</html>